<template>
	<div></div>
	</template>
	
	<script setup>
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'
	
	//创建场景
	const scene = new THREE.Scene();
	//创建相机
	const camera = new THREE.PerspectiveCamera();
	camera.position.y = 5
	camera.position.z = 10
	
	
	const loader = new GLTFLoader();
    loader.load('./threeCuteBrothers.glb',function(glb){
		scene.add(glb.scene)
	})

	//添加环境光
	const light = new THREE.AmbientLight(0xffffff,1); //柔和的白光
	scene.add(light);

	//平行光
	const directionalLight = new THREE.DirectionalLight(0xffffff,3);
	scene.add(directionalLight);

	//创建渲染器
	const renderer = new THREE.WebGLRenderer()
	document.body.appendChild(renderer.domElement)
	//调整渲染器窗口大小
	renderer.setSize(window.innerWidth,window.innerHeight);

	//添加轨道控制器
	const controls = new OrbitControls(camera,renderer.domElement)
	//添加坐标辅助线
	const axesHelper = new THREE.AxesHelper(5);
	scene.add(axesHelper)

	function animate(){
		//告诉浏览器你希望执行一个动画
		requestAnimationFrame( animate);
		//轨道控制器更新
		controls.update();
		renderer.render(scene,camera);
	}
	animate();

	</script>
	
	<style>
	
	
	</style>
	